<template>
  <div class="collect app-container">
    <div class="my-tabs">
      <div class="tabs-item" :class="{ active: activeTabs === 1 }" @click="changeTabs(1)">
        <p>
          关键词搜索采集
          <el-tag :type="'danger'" round v-if="keywordCounts.uncompletedTotal != 0">
            {{ keywordCounts.uncompletedTotal }}
          </el-tag>
        </p>
      </div>
      <div class="tabs-item" :class="{ active: activeTabs === 2 }" @click="changeTabs(2)">
        <p>
          图片搜索采集
          <el-tag :type="'danger'" round v-if="imageCounts.uncompletedTotal != 0"> {{ imageCounts.uncompletedTotal }} </el-tag>
        </p>
      </div>
    </div>
    <div class="content">
      <SearchkeyCollect v-if="activeTabs === 1" :count="keywordCounts" @getCount="init"></SearchkeyCollect>
      <ImgCollect v-if="activeTabs === 2" :count="imageCounts" @getCount="init"></ImgCollect>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import SearchkeyCollect from "./components/SearchkeyCollect.vue";
import ImgCollect from "./components/ImgCollect.vue";
import { getCount } from "@/api/mall/search";

const activeTabs = ref(1);

const keywordCounts = ref({
  uncompletedTotal: 0,
  completedTotal: 0,
  ignoreTotal: 0
});
const imageCounts = ref({
  uncompletedTotal: 0,
  completedTotal: 0,
  ignoreTotal: 0
});

/**
 * 获取数量
 * @param  key tab类型
 */
const init = async key => {
  const res = await getCount(key);
  if (key == 1) {
    keywordCounts.value = res.data;
  } else if (key == 2) {
    imageCounts.value = res.data;
  }
};
const changeTabs = val => {
  activeTabs.value = val;
};
onMounted(() => {
  init(1);
  init(2);
});
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

.collect {
  .my-tabs {
    display: flex;
    position: absolute;

    .tabs-item {
      width: 282px;
      height: 64px;
      padding: 10px 20px;
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      background-color: #f5f7fa;
      cursor: pointer;
      font-size: 12px;
      color: #86909c;
      display: flex;
      align-items: center;

      p {
        width: 100%;
        font-size: 16px;
        color: #131414;
        line-height: 24px;
        display: flex;
        justify-content: space-between;

        .el-tag {
          height: 20px;
        }
      }

      &:first-of-type {
        margin-right: 20px;
      }

      &.active {
        background-color: white;
        box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
      }
    }
  }

  .content {
    background-color: white;
    padding: 20px;
    box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
    margin-top: 64px;
  }
}

::v-deep(.pagination) {
  display: flex;
  justify-content: right;
  margin-top: 10px;
}
</style>
